<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body style="background-color: #f0f2f5">
    <div class="row clearfix" style="background-color:#393d49">
        <div class="col-md-12 column">
            <ul class="nav nav-pills">
                <li style="margin-left: 5%">
                    <a href="index2">首页</a>
                </li>
                <li>
                    <a href="#">板块</a>
                </li>
                <li>
                    <a href="#">帮助</a>
                </li>
                <li style="margin-left: 70%">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span
                            class="glyphicon glyphicon-user">&nbsp;</span>欢迎你！${sessionScope.session_user.getName()}<strong
                            class="caret"></strong></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="center">个人中心</a>
                        </li>
                        <li>
                            <a href="logout">退出登录</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="container">
        <ul class="breadcrumb" style="margin-top: 5%">
            <li>
                <a href="index2" style="font-style: italic">首页</a>
            </li>
            <li class="active" style="font-style: italic">
                个人中心
            </li>
        </ul>
        <div style="margin-top: 5%">
            <div class="tabbable" id="tabs-550688">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#panel-80104" data-toggle="tab">个人信息</a>
                    </li>
                    <li>
                        <a href="#panel-670704" data-toggle="tab">资料修改</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="panel-80104" style="margin-top: 5%">
                        <img alt="140x140" src="${pageContext.request.contextPath}/images/default.jpg" class="img-circle" />
                        <p style="margin-top: -7.5%;margin-left:13%">用户名：${sessionScope.session_user.getName()}</p>
                        <p style="margin-left: 13%">等级：LV${sessionScope.session_user.getLv()}</p>
                        <p style="margin-left: 13%">经验值：</p>
                        <div class="progress active progress-striped"
                            style="width: 10%;height: 10px;margin-left: 18%;margin-top: -2.25%">
                            <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0"
                                aria-valuemax="100"
                                style="width: ${sessionScope.session_user.getExp() / sessionScope.expMax * 100}%;">
                            </div>
                        </div>
                        <p style="margin-left: 30%;margin-top: -3%">
                            ${sessionScope.session_user.getExp()}/${sessionScope.expMax}</p>
                        <table class="table" style="width: 35%;margin-top: 5%">
                            <tbody>
                                <tr class="info">
                                    <td>
                                        性别：&nbsp;${sessionScope.session_user.getSex()}
                                    </td>
                                </tr>
                                <tr class="info">
                                    <td>
                                        邮箱：&nbsp;${sessionScope.session_user.getEmail()}
                                    </td>
                                </tr>
                                <tr class="info">
                                    <td>
                                        年龄：&nbsp;${sessionScope.session_user.getAge()}
                                    </td>
                                </tr>
                                <tr class="info">
                                    <td>
                                        学号：&nbsp;${sessionScope.session_user.getStunum()}
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <div class="panel-group" id="panel-371688"
                            style="width: 40%;margin-top: -25%;margin-left: 50%;">
                            <div class="panel panel-default">
                                <div class="panel-heading" style="background-color: rgb(75, 187, 187)">
                                    <a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-371688"
                                        href="#panel-element-753539">近期发帖</a>
                                </div>
                                <c:choose>
                                    <c:when test="${empty sessionScope.aList}">
                                        <div id="panel-element-753539" class="panel-collapse collapse">
                                            <div class="panel-body">
                                                啥都没有,快去发个帖子吧
                                            </div>
                                        </div>
                                    </c:when>
                                    <c:otherwise>
                                        <div id="panel-element-753539" class="panel-collapse collapse">
                                        <c:forEach items="${aList}" var="bean">
                                                <div class="panel-body">
                                                        <a href="look?id=${bean.aid}">
                                                                ${bean.title}
                                                        </a>
                                                </div>
                                            </c:forEach>
                                        </div>
                                    </c:otherwise>
                                </c:choose>

                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="panel-670704">
                        <form class="form-horizontal" style="width: 50%;margin-top: 5%" action="change">
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" value="${sessionScope.session_user.getName()}" name="name">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
                                <div class="col-sm-10">
                                    <input type="email" class="form-control" id="inputEmail3" placeholder="Email" value="${sessionScope.session_user.getEmail()}" name="email">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">性别</label>
                                <div class="col-sm-10">
                                    <select class="form-control" name="sex">
                                        <option>男</option>
                                        <option>女</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">年龄</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="age" value="${sessionScope.session_user.getAge()}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">学号</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="stunum" value="${sessionScope.session_user.getStunum()}">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="submit" class="btn btn-info">保存</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>